<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
</head>
<body>
	
	<style type="text/css">
		* {
			padding: 0;
			margin: 0;
		}
		html {
			font-size: 10px;
		}
		body {
			width: 750rem;
			max-width: 100%;
			height: 100%;
			border: 1rem solid orange;
		}
		div {
			width: 100vw;
			height: auto;
			display: flex;
			justify-content: space-around;
			flex-wrap: wrap;
			align-items: center;
			align-content: center;
		}
		/*div > a {
			display: block;
			width: 30vw;
			height: 12.5vw;
			border-bottom: 1px solid orange;
		}*/
		div a {
			margin: 2rem auto;
			transition: all 0.5s;
			
		}
		@media screen and (min-width: 280px) {
			div > a {
				display: block;
				width: 100vw;
				height: 45vw;
				border-bottom: 1px solid orange;
			}
		}
		@media screen and (min-width: 540px) {
			div > a {
				display: block;
				width: 45vw;
				height: 20vw;
				border-bottom: 1px solid orange;
			}
		}
		@media screen and (min-width: 900px) {
			div > a {
				display: block;
				width: 30vw;
				height: 12.5vw;
				border-bottom: 1px solid orange;
			}
		}
		a img {
			width: 100%;
			height: 100%;
		}
	</style>
	<div>
		<a href=""><img src="https://static.jiaoyimao.com/jym-oss/resource/item/3163891390/20210114/143225997.jpg?x-oss-process=image/resize,h_517,m_lfit" alt="" /></a>
		<a href=""><img src="https://static.jiaoyimao.com/jym-oss/resource/item/3163891390/20210114/143225997.jpg?x-oss-process=image/resize,h_517,m_lfit" alt="" /></a>
		<a href=""><img src="https://static.jiaoyimao.com/jym-oss/resource/item/3163891390/20210114/143225997.jpg?x-oss-process=image/resize,h_517,m_lfit" alt="" /></a>
		<a href=""><img src="https://static.jiaoyimao.com/jym-oss/resource/item/3163891390/20210114/143225997.jpg?x-oss-process=image/resize,h_517,m_lfit" alt="" /></a>
		<a href=""><img src="https://static.jiaoyimao.com/jym-oss/resource/item/3163891390/20210114/143225997.jpg?x-oss-process=image/resize,h_517,m_lfit" alt="" /></a>
		<a href=""><img src="https://static.jiaoyimao.com/jym-oss/resource/item/3163891390/20210114/143225997.jpg?x-oss-process=image/resize,h_517,m_lfit" alt="" /></a>
		<a href=""><img src="https://static.jiaoyimao.com/jym-oss/resource/item/3163891390/20210114/143225997.jpg?x-oss-process=image/resize,h_517,m_lfit" alt="" /></a>
	
		<a href="">123aaah1h2h3</a>
		<a href="">123aaah1h2h3</a>
		<a href="">123aaah1h2h3</a>
		<a href="">123aaah1h2h3</a>
		<a href="">123aaah1h2h3</a>
		<a href="">123aaah1h2h3</a>
	</div>
	
	<style type="text/css">
		ul {
			height: 600px;
			overflow: hidden;
			transform-style: preserve-3d;
			position: relative;
			transform: rotateX(-60deg);
		}
		ul > li {
			/*position: absolute;*/
			position: relative;
			/*left: 0;
			top: 0;
			transform: rotate3d(1, 0, 1, 90deg);*/
			margin: 10px;
			transform: rotateX(60deg) rotate(40deg);
			/*width: 200px;*/
			height: 100px;
			transition: all .4s;
			background: greenyellow;
		}
		ul > li:nth-last-child(1) {
			/*margin: 0;*/
			animation: r1 .6s linear infinite;
		}
		ul > li:nth-last-child(2) {
			/*margin: 0;*/
			animation: r2 .6s linear infinite;
		}
		ul > li:hover {
			margin: 0;
			position: relative;
			transform: rotateX(60deg) rotate(180deg);
		}
		@keyframes r1 {
			from {
				transform: rotateX(60deg) rotate(40deg);
			}
			to{
				transform: rotateX(180deg) rotate(360deg);
			}
		}
		@keyframes r2 {
			from {
				transform: rotateX(60deg) rotate(40deg);
			}
			to{
				transform: rotateX(180deg) rotate(-360deg);
			}
		}
	</style>
	<ul>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
	</ul>
	
	<script src="js/jquery-3.5.1.js"></script>
	<script type="text/javascript">
		$(function() {
			$("body").click(function() {
				$("html").stop().animate({
					scrollTop: 0
				}, "slow", "swing", function() {
					console.dir(this);
					$("body").css({
						"background": "green"
					});
				});
			});
			
		});
		
	</script>
</body>
</html>